let xmlHttpRequest;
let name;

function createXMLHttpRequest()
{
    xmlHttpRequest = new XMLHttpRequest();
}

function showInform()
{
    name  = this.alt;
    let url = "showInfo?categoryId=" + name;
    sendRequest(url);
}

function sendRequest(url)
{
    createXMLHttpRequest();
    xmlHttpRequest.onreadystatechange = processInform;
    xmlHttpRequest.open("GET",url,true);
    xmlHttpRequest.send(null);

}
function processInform()
{
    if (xmlHttpRequest.readyState ===4)
        if(xmlHttpRequest.status ===200)
        {
            let rep = xmlHttpRequest.responseText;
            let inform = document.getElementById('inform');
            inform.innerText = rep;
            inform.className = name;
            inform.style.display = 'block';
        }
}

function hideInform(event)
{
    let informDiv = document.getElementById('inform');
    let x = event.clientX;
    let y = event.clientY;
    let divx1 = informDiv.offsetLeft;
    let divy1 = informDiv.offsetTop;
    let divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
    let divy2 = informDiv.offsetTop + informDiv.offsetHeight;
    if(x < divx1 || x > divx2 || y < divy1 || y> divy2)
    {
        document.getElementById('inform').style.display = 'none';
    }
}

document.querySelectorAll('area').forEach(item => {
    item.addEventListener('mouseenter', showInform);
    item.addEventListener('mouseleave', hideInform);
})
